<template>
    <div :id="id"></div>
</template>

<script>
import * as echarts from 'echarts';
import JQuery from 'jquery';
import util from '@/js/util/util.js';
import register from '@/js/main/register.js';
import config from '@/js/util/config.js';

export default {
    props: {
        element: {
            type: Object
        },
        id: {
            type: String
        },
        mode: {
            type: Number
        }
    },
    data() {
        return {
            window: window
        };
    },
    created() {
        register.addComponent(this);
    },
    mounted() {
        this.createElement();
    },
    methods: {
        redraw() {
            let id = util.replaceMinus(this.id);
            if (window['redraw' + id]) {
                window['redraw' + id]({
                    target: this.element,
                    echarts: echarts,
                    JQuery: JQuery,
                    mode: this.mode
                });
            }
        },
        createElement() {
            if (this.element.data.file) {
                let file = null;
                for (let i = 0; i < this.element.data.file.length; i++) {
                    if (this.element.data.file[i].name == 'element.html') {
                        file = this.element.data.file[i].file;
                        break;
                    }
                }
                if (file) {
                    let _this = this;
                    let url = '';
                    if (this.mode == 3) {
                        url = 'simple/' + this.element.data.id + '/element.html';
                    } else {
                        url = `${config.getServiceURL('scene')}service/scene/element/file/one`;
                    }
                    JQuery.ajax({
                        url: url,
                        type: 'POST',
                        data: {
                            file: file
                        },
                        success: function(responseText) {
                            let html = responseText;
                            let id = util.replaceMinus(_this.id);
                            html = html.replace(/{id}/g, id);
                            for (let i = 0; i < _this.element.data.file.length; i++) {
                                if (_this.element.data.file[i].name !== 'elementAttr.html') {
                                    let url = '';
                                    if (_this.mode == 3) {
                                        url = 'simple/' + _this.element.data.id + '/' + _this.element.data.file[i].name;
                                    } else {
                                        url = `${config.getServiceURL('scene')}service/scene/file/download?file=${_this.element.data.file[i].file}`;
                                    }
                                    html = html.replace(new RegExp('"' + _this.element.data.file[i].name + '"', 'g'), '"' + url + '"');
                                }
                            }
                            JQuery('#' + _this.id).html(html);
                            window['setElement' + id]({
                                target: _this.element,
                                echarts: echarts,
                                JQuery: JQuery,
                                mode: _this.mode
                            });
                        }
                    });
                }
            }
        }
    },
    destroyed() {
        register.removeComponent(this);
        let id = util.replaceMinus(this.id);
        if (window['destroy' + id]) {
            window['destroy' + id]({
                target: this.element,
                echarts: echarts,
                JQuery: JQuery,
                mode: this.mode
            });
        }
    }
};
</script>
